* {
    box-sizing: border-box;
}
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    border: 0;
    vertical-align: baseline;
}

body {
	margin: 0px 0px ;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;

    min-height: 100vh;
    text-rendering: optimizeLegibility;

	header {
		flex-shrink: 0;
	    min-height: 45px;
	    max-height: 45px;
	    padding: 8px 0;
	    position: fixed;
	    width: 100%;
	    z-index: 9999;
	    -webkit-transform: translateZ(0);
	    transform: translateZ(0);
    	
	    > * {
	    	max-width: 1400px;
	    	width: 100%;
	    	padding: 0 20px;
	    	margin: 0 auto;
	    }

	    div.burger {
	    	display: none;
	    }
	}
	
	article {

	    -webkit-box-flex: 1;
	    flex-grow: 1;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	    min-height: calc(100vh - 45px);
	    
	    left: 0;
	    min-height: 100%;
	    padding-top: 100px;
	    position: relative;
	    z-index: 99;





	    -webkit-box-flex: 1;
	    flex-grow: 1;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-orient: horizontal;
	    -webkit-box-direction: normal;
	    flex-flow: row nowrap;
	    
	    
	    padding-top: 45px;
		margin: 0 auto;
	    width: 100%;
	    max-width: 1400px;
	    
	    > * {
	    	margin: 0 24px;
	    }

	  aside {
	  	transition: max-height .2s ease-out;

	  	-webkit-box-flex: 0;
    	flex: 0 0 20em;
        margin-left: 0;

        -webkit-box-flex: 0;
	    flex: 0 0 20em;
	    height: calc(100vh - 45px);
	    position: -webkit-sticky;
	    position: sticky;
	    overflow-y: auto;
	    top: 45px;
	  }
	
	  section.page{

	    -webkit-box-flex: 1;
	    flex: 1 auto;
	    max-width: 100%;
	    min-width: 0;
	

	 	.jump-to-section{
	 		display:none;
	        margin-top: 0.5em;
	        margin-left: 0.2em;
	        ul{
	            padding-left: 10px;
	        }

	        nav{
	            display: none;
	            position: absolute;
	            z-index: 5;
	            border: 1px solid ;
	            padding: 1em 30px;
	            border-radius: 3px;
	            min-width: 25%;
	            max-width: 50%;
	            box-shadow: 0 5px 8px rgba(0,0,0,.25);  
	        }
	 	}
	  }

	  section.right-menu{
	  	    margin-right: 0;
	  	        align-self: flex-start;
    display: block;
    -webkit-box-flex: 0;
    flex: 0 0 240px;
    max-height: calc(100vh - 45px);
    overflow-y: auto;
    position: -webkit-sticky;
    position: sticky;
    	top: 45px;
        margin-bottom: 40px;
	  }
	}
	footer {
		> * {
	    	max-width: 1400px;
	    	width: 100%;
	    	padding: 0 20px;
	    	margin: 0 auto;
	    }
    }
}

/* hideheader hidenav hidebreadcrumb hidetoc hidefooter */
body {
	&.hideheader{
		article{
			padding-top: 0px ;
			aside{
				top:0px;
				height: calc(100vh);
			}
			section.right-menu{
				top:0px;
				max-height: calc(100vh);
			}
		}
	}
}

@media(max-width:1160px) {
	body{
		header{
			div.burger{
				display: none;
			}
		}
		article {
			padding-left: 0px ;
			padding-right: 0px;
			aside{
				margin-right: 0px;
			}
			aside.responsive{
				display: block;
			}
			section.page{
				.jump-to-section{display: block;}	 		
			}
			section.right-menu{
				display: none;	
			}

		}	
	}
}

@media(max-width:936px) {
	body{
		header{
			div.burger{
				display: block;
			}
		}
		article {
			padding-left: 0px;
			padding-right: 0px;
			aside{
				display: none;
				flex: 0 0 100%;
			}
			aside.responsive{
				display: block;
			}
			section.page{
				.jump-to-section{display: block;}	 		
			}
			section.right-menu{
				display: none;	
			}

		}	
	}
}



